<template>
  <a-modal
    v-model:visible="formVisible"
    title="选择图标"
    :max-height="600"
    :footer="false"
  >
    <div class="choose-area">
      <div
        v-for="{ name, componentName } in icons.list"
        :key="name"
        @click="chooseIcon(name)"
      >
        <component :is="componentName" class="icon-show" :size="32" />
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { useVisible } from '@/hooks/visible';
  import icons from './icons.json';

  const props = defineProps<{
    visible: boolean;
  }>();

  const emits = defineEmits<{
    (e: 'update:visible', visible: boolean): void;
    (e: 'choose', icon: string): void;
  }>();

  const { formVisible } = useVisible(props, emits);

  /**
   * 选中图标
   * 关联 并 关闭模态框
   */
  const chooseIcon = (name: string) => {
    emits('choose', name);
    formVisible.value = false;
  };
</script>

<style lang="less" scoped>
  .choose-area {
    display: flex;
    flex-wrap: wrap;
    > div {
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      line-height: 1;

      &:hover {
        background: rgba(0, 0, 0, 0.13);
      }
    }

    overflow-y: auto;
  }

  .icon-show {
    > :deep(svg) {
      width: 40px;
      height: 40px;
    }
  }
</style>
